import "../sass/menu.scss";

import axios from "axios";
import React from "react";
import { Search } from "react-vant";
import Product from "../components/Product";

import { useEffect, useState } from "react";

import { useNavigate } from "react-router-dom";

function Menu() {
    let navigate = useNavigate();

    //商品类型数据
    let [typeData, setTypeData] = useState([]);

    //显示商品类型高亮下标
    let [activeIndex, setActiveIndex] = useState(0);

    //当前类型的商品数据
    let [currentProduct, setCurrentProduct] = useState([]);

    //获取商品类型
    let getType = () => {
        axios({
            method: "get",
            url: "/type",
        })
            .then((res) => {
                if (res.data.code === 400) {
                    setTypeData(res.data.result);

                    let type =
                        res.data.result[activeIndex].type;

                    //根据商品类型获取商品数据
                    getProductByType(type);
                }
            })
            .catch((err) => {});
    };

    //切换商品类型
    let toggleType = (index) => {
        if (index === activeIndex) {
            return;
        }

        setActiveIndex(index);

        //获取商品类型
        let type = typeData[index].type;
        getProductByType(type);
    };

    //根据商品类型获取商品数据
    let getProductByType = (typeValue) => {
        //typeValue: 商品类型
        axios({
            method: "get",
            url: "/typeProducts",
            params: {
                key: "type",
                value: typeValue,
            },
        })
            .then((res) => {
                if (res.data.code === 500) {
                    setCurrentProduct(res.data.result);
                }
            })
            .catch((err) => {});
    };

    useEffect(() => {
        getType();
    }, []);

    return (
        <div className="menu-my">
            <div
                className="sou"
                onClick={() => {
                    navigate("/sousuo");
                }}
            >
                <Search
                    shape="round"
                    placeholder="请输入搜索关键词"
                />
            </div>
            <div className="menu">
                <div className="left">
                    {typeData.map((item, index) => {
                        return (
                            <div
                                key={index}
                                className={
                                    activeIndex === index
                                        ? "active"
                                        : ""
                                }
                                onClick={() => {
                                    toggleType(index);
                                }}
                            >
                                {item.typeDesc}
                            </div>
                        );
                    })}
                </div>
                <div className="right">
                    <div className="product">
                        {currentProduct.map(
                            (item, index) => {
                                return (
                                    <div
                                        className="product-item"
                                        key={index}
                                        onClick={() => {
                                            navigate(
                                                `/detail/${item.pid}`
                                            );
                                        }}
                                    >
                                        <Product
                                            pro={item}
                                        ></Product>
                                    </div>
                                );
                            }
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Menu;
